import { SearchOutlined } from "@ant-design/icons";
import { DatePicker, Form, Input, Select, Table } from "antd";
import "./index.css"
import { useNavigate } from "react-router-dom";
function Index() {
  const router = useNavigate();
  const columns= [
    {
      title: <p style={{color:"grey"}}>订单号</p>,
      dataIndex: 'orderNumber',
      key: 'orderNumber',
      render: (text:any) => <a className="orderNumber" onClick={()=>router("/admin/jiesuan")}>{text}</a>, 
    },
    {
      title: <p style={{color:"grey"}}>下单时间</p>,
      dataIndex: 'orderTime',
      key: 'orderTime',
    },
    {
      title: <p style={{color:"grey"}}>合同编号</p>,
      dataIndex: 'hetongNumber',
      key: 'hetongNumber',
      render: (text:any) => <a style={{color: '#0709fd',textDecoration: 'underline'}}>{text}</a>,
    },
    {
      title: <p style={{color:"grey"}}>状态</p>,
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: <p style={{color:"grey"}}>始发地</p>,
      dataIndex: 'startAdress',
      key: 'startAdress',
    },
    {
      title: <p style={{color:"grey"}}>目的地</p>,
      dataIndex: 'endeGoods',
      key: 'endGoods',
    },
    {
      title: <p style={{color:"grey"}}>收货方</p>,
      dataIndex: 'receiveGoods',
      key: 'receiveGoods',
    },
    {
      title: <p style={{color:"grey"}}>货物名称</p>,
      dataIndex: 'goodsName',
      key: 'goodsName',
    },
    {
      title: <p style={{color:"grey"}}>重量kg</p>,
      dataIndex: 'weight',
      key: 'weight',
    },
    {
      title: <p style={{color:"grey"}}>运输费（￥）</p>,
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: <p style={{color:"grey"}}>回单时间</p>,
      dataIndex: 'getOrderTime',
      key: 'getOrderTime',
    },
  ];
  
  const data = [
    {
      key: '1',
      orderNumber: '123456789',
      orderTime: '2022-01-01',
      hetongNumber: '123456789',
      status: '已结算',
      startAdress: '北京市',
      endeGoods: '上海市',
      receiveGoods: '张三',
      goodsName: '苹果',
      weight: '100',
      price: '1000',
      getOrderTime: '2022-01-02'
    },
    {
      key: '2',
      orderNumber: '987654321',
      orderTime: '2022-01-02',
      hetongNumber: '987654321',
      status: '已结算',
      startAdress: '上海市',
      endeGoods: '广州市',
      receiveGoods: '李四',
      goodsName: '香蕉',
      weight: '200',
      price: '2000',
      getOrderTime: '2022-01-03'
    },
    {
      key: '3',
      orderNumber: '111111111',
      orderTime: '2022-01-03',
      hetongNumber: '111111111',
      status: '已结算',
      startAdress: '广州市',
      endeGoods: '深圳市',
      receiveGoods: '王五',
      goodsName: '橙子',
      weight: '300',
      price: '3000',
      getOrderTime: '2022-01-04'
    },
    {
      key: '4',
      orderNumber: '222222222',
      orderTime: '2022-01-04',
      hetongNumber: '222222222',
      status: '已结算',
      startAdress: '深圳市',
      endeGoods: '成都市',
      receiveGoods: '赵六',
      goodsName: '葡萄',
      weight: '400',
      price: '4000',
      getOrderTime: '2022-01-05'
    },
    {
      key:"5",
      orderNumber: '333333333',
      orderTime: '2022-01-05',
      hetongNumber: '333333333',
      status: '已结算',
      startAdress: '成都市',
      endeGoods: '杭州市',
      receiveGoods: '钱七',
      goodsName: '西瓜',
      weight: '500',
      price: '5000',
      getOrderTime: '2022-01-06'
    },
    {
      key:"6",
      orderNumber: '444444444',
      orderTime: '2022-01-06',
      hetongNumber: '444444444',
      status: '已结算',
      startAdress: '杭州市',
      endeGoods: '南京市',
      receiveGoods: '孙八',
      goodsName: '草莓',
      weight: '600',
      price: '6000',
      getOrderTime: '2022-01-07'
    }
  ];
  
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const onChange= (date:any, dateString:any) => {
    console.log(date, dateString);
  };
  return (
    <div>
      <div style={{borderBottom: '1px solid rgb(243, 235, 235)',marginBottom:"20px",display:'flex',alignItems:'center'}}>
        <p style={{width:"70px",borderRight:"1px solid rgb(243, 235, 235)",}}>共283条</p>
        <Input 
          prefix={<SearchOutlined  style={{color:"#ccc"}}/>}
          placeholder="请输入关键词"
          style={{height:"30px",border:"none"}}
        ></Input>
      </div>
      <Form
        //横向
        layout="inline"
      >
        <Form.Item>
          <Select
            defaultValue="收货方"
            style={{ width: 200 }}
            onChange={handleChange}
            options={[
              { value: '收货方', label: '收货方' },
              { value: '始发地', label: '始发地' },
              { value: '目的地', label: '目的地' },
              { value: '订单号', label: '订单号' },
              { value: '货名',   label: '货名' },
            ]}
          />
        </Form.Item>
        <Form.Item>
          <Input placeholder="请输入关键词" style={{ width: 200 }} />
        </Form.Item>
        <Form.Item>
          <Select
            defaultValue="下单时间"
            style={{ width: 200 }}
            onChange={handleChange}
            options={[
              { value: '下单时间', label: '下单时间' },
              { value: '报价有效截止期', label: '报价有效截止期' },
            ]}
          />
        </Form.Item>
        <Form.Item>
          <DatePicker onChange={onChange} placeholder="请选择开始时间"/>
        </Form.Item>
        <Form.Item>
          <DatePicker onChange={onChange} placeholder="请选择结束时间"/>
        </Form.Item>
      </Form>
      <Table 
        columns={columns} 
        dataSource={data} 
        //分页
        pagination={{ 
          total:85,
          showSizeChanger:true,
          showQuickJumper:true,
          showTotal:(total) => `Total ${total} items`,
        }}
      />
    </div>
  )
}

export default Index
